.playContainer {
  @apply bg-black w-full;
  font-family: Alibaba PuHuiTi 2;
  padding: 1.875rem 0;
  height: 52.083333vw;
  max-height: calc(100vh - 5rem);

  .playBox {
    @apply w-full h-full flex;

    .playArea {
      @apply w-full h-full flex flex-col bg-bg;

      .play {
        @apply relative bg-black w-full flex-1;

        .showToast {
          @apply absolute right-5 top-0 w-auto h-auto z-4 flex flex-col items-end;
        }

        .openVipPanel {
          @apply absolute bottom-5 right-5 flex flex-col justify-center items-center;
          z-index: 11;
          background: #2a2a31;
          border-radius: 0.625rem;
          width: 18.75rem;
          height: 11.25rem;

          .dailyPrice {
            @apply font-bold text-base leading-4;
            font-family: Alibaba PuHuiTi 2;
            font-weight: bold;
            font-variation-settings: 'opsz' auto;
            font-feature-settings: 'kern' on;
            background: linear-gradient(90deg, #ffbd8d 0%, #ffe5d8 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-fill-color: transparent;
          }

          .good {
            @apply text-sm text-white-60 mt-5 mb-10;
            line-height: 0.875rem;
          }

          .btn {
            @apply rounded font-semibold text-center h-9 leading-9 cursor-pointer;
            width: 9rem;
            font-family: Alibaba PuHuiTi 2;
            color: #7c3c19;
            background: linear-gradient(90deg, #ffbd8d 0%, #ffe5d8 100%);
          }
        }

        .notVip {
          @apply absolute z-3 left-0 top-0;
        }

        .jujiTishi {
          @apply absolute z-3 text-center text-lg;
          right: 3.375rem;
          bottom: 6.25rem;
          width: 22.9375rem;
          height: 2.75rem;
          line-height: 2.75rem;
          border-radius: 2.75rem;
          background: rgba(255, 255, 255, 0.3);
          color: #cdcdcd;
          animation: scales 0.5s ease;

          &::after {
            @apply absolute w-0 h-0;
            content: '';
            right: 5rem;
            bottom: -0.75rem;
            border-left: 0.625rem solid transparent;
            border-right: 0.625rem solid transparent;
            border-top: 0.75rem solid rgba(255, 255, 255, 0.3);
          }
        }
      }

      .playMenu {
        @apply w-full flex items-center justify-between flex-nowrap;
        height: 3.75rem;
        .menuLeft,
        .menuRight {
          @apply flex;
        }
        .btn {
          @apply rounded inline-flex h-10 items-center justify-center relative text-white text-sm cursor-pointer;
          font-family: Alibaba PuHuiTi 2;
          width: 7.5rem;
          background: rgba(255, 255, 255, 0.1);
          &:hover {
            @apply opacity-80;
          }
          &.btnRight {
            @apply relative;

            &::before {
              @apply absolute w-full left-0 h-4 z-4;
              top: -1rem;
              content: '';
            }

            .btnHover {
              @apply absolute z-100  hidden;
              bottom: 3.2rem;
            }

            &:hover {
              @apply opacity-100;
              .btnHover {
                @apply flex;
              }
            }
          }

          &:not(:first-child) {
            @apply ml-5;
          }

          & > img {
            width: 1.125rem;
            height: 1.125rem;
            margin-right: 0.625rem;
          }

          &.btnShare {
            .corn {
              @apply absolute;
              width: 1.25rem;
              height: 1.25rem;
              right: -1.125rem;
              top: -0.5rem;
              perspective: 50px;
              transform-style: preserve-3d;
              animation: rotates 0.5s 8;

              @keyframes rotates {
                0% {
                  transform: rotateY(0deg);
                }

                100% {
                  transform: rotateY(180deg);
                }
              }
            }
          }

          &.btnDownload {
            .corner {
              @apply absolute h-5 text-xs text-white inline-block leading-5 text-center;
              right: -1.875rem;
              top: -0.625rem;
              width: 4.375rem;
              border-radius: 4.375rem;
              border-bottom-left-radius: 0;
              background: linear-gradient(90deg, #fe5666 4%, #fe7dd3 96%);
            }
          }
        }
      }
    }

    .sectionBox {
      @apply h-full bg-bg p-5 flex flex-col shrink-0;
      width: 20.625rem;

      .vodName {
        @apply font-semibold text-white text-xl leading-5;
      }

      .lines {
        @apply flex flex-nowrap my-5 relative;

        .noLine {
          @apply text-center w-full h-10 leading-10 font-medium text-base;
          color: #666666;
        }

        .lineBtn {
          @apply rounded flex items-center h-10 justify-center text-base shrink-0 cursor-pointer;
          width: 7.5rem;

          &:not(:first-child) {
            margin-left: 0.625rem;
          }

          &.lineOfficial {
            @apply font-semibold relative;
            background: linear-gradient(90deg, #ffbd8d 0%, #ffe5d8 100%);
            color: #7c3c19;

            span {
              @apply font-semibold;
            }

            .vipTip {
              @apply absolute right-0 flex items-center justify-center;
              top: -0.625rem;
              width: 4.875rem;
              height: 1.125rem;
              background: linear-gradient(270deg, #f34c42 0%, #f68d44 100%);

              span {
                @apply text-xs inline-block font-medium whitespace-nowrap text-white;
                transform: scale(0.8);
              }
            }
          }

          &.lineThird {
            @apply bg-bg25 text-white-80;
            border: 1px solid rgba(255, 255, 255, 0.2);

            &:hover {
              border: 2px solid #ffffff;
            }
          }

          &.lineLive {
            @apply text-theme;
          }

          &.switchLine {
            width: 1.875rem;
            margin-left: 0.625rem;

            .arrow {
              @apply w-5 h-5;
              transform: rotate(-90deg);
              transition: all 0.3s;
            }
          }

          &.openPanel {
            .arrow {
              transform: rotate(0deg);
            }
          }

          &.linePanelItem {
            @apply ml-0 justify-between pl-6 pr-4;
            width: 86%;
            margin-bottom: 0.625rem;
          }
        }

        .linePanel {
          @apply absolute w-full left-0 z-4 bg-bg py-5 mt-10 overflow-y-auto;
          max-height: 18.75rem;

          &::-webkit-scrollbar {
            width: 0.25rem;
          }

          &::-webkit-scrollbar-corner,
          &::-webkit-scrollbar-track {
            background-color: transparent;
          }

          &::-webkit-scrollbar-thumb {
            background-color: rgba(255, 255, 255, 0.2);
          }
        }

        .nullLine {
          @apply w-full flex flex-col items-center justify-center;

          .img {
            width: 10rem;
          }

          .text {
            @apply text-base text-white-80;
            font-family: PingFang SC;
          }
        }
      }

      .movieList {
        @apply flex-1 overflow-y-auto;

        &::-webkit-scrollbar {
          @apply w-1;
        }

        &::-webkit-scrollbar-corner,
        &::-webkit-scrollbar-track {
          background-color: transparent;
        }

        &::-webkit-scrollbar-thumb {
          background-color: rgba(255, 255, 255, 0.2);
        }

        .listTitle {
          @apply font-medium text-lg mb-5;
          line-height: 1.125rem;
          font-family: Alibaba PuHuiTi 2;
          color: #999;
        }

        .listItem {
          @apply flex h-20 rounded-sm mb-3 items-center pr-4 block w-full;

          &:hover {
            background: rgba(255, 255, 255, 0.1);
          }

          &:last-child {
            @apply mb-0;
          }

          .img {
            @apply h-20 shrink-0 ;
            width: 9.0625rem;
          }

          .listName {
            @apply text-white font-medium text-base leading-4;
            font-family: Alibaba PuHuiTi 2;
            margin-left: 0.625rem;
          }
        }
      }
    }
  }
}

@keyframes scales {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

// ipad mini air适配
@media screen and (min-width: 768px) and (max-width: 880px) {
  .playContainer {
    .playBox {
      .playArea {
        .playMenu {
          .menuLeft {
            @apply mr-2;
          }
          .btn {
            width: 6rem;
          }
        }
      }
    }
  }
}

// 移动端
@media screen and (max-width: 767px) {
  .playContainer {
    margin-top: 5.875rem !important;
    padding: 0;

    .playBox {
      &.playBoxPhone {
        @apply fixed z-4;
        top: 94px;
        height: 52.083333vw;
      }

      .playArea {
        .play {
          .openVipPanelPhone {
            @apply absolute bottom-4 right-4 flex items-center px-4 h-8;
            background: linear-gradient(90deg, #ffbd8d 0%, #ffe5d8 100%);
            border-radius: 40px;
            z-index: 11;
            img {
              @apply w-5 mr-2;
            }
            .btn {
              @apply rounded font-semibold text-center cursor-pointer text-sm;
              font-family: Alibaba PuHuiTi 2;
              color: #7c3c19;
            }
          }

          .showToast {
            @apply right-2;
          }
        }
      }
    }
  }

  .detailPhone {
    .score2menu {
      @apply flex mb-5 mt-3 items-center;

      .infoVod {
        @apply px-4;

        & > span {
          @apply text-white-60 text-xs leading-3;
          font-family: Alibaba PuHuiTi 2;
        }
      }

      .scoreBox {
        @apply inline-flex px-4 items-center flex-nowrap;
        margin-top: 0.625rem;

        .mark {
          @apply text-xs text-white-80 leading-4 flex items-center;

          &:nth-child(1) {
            @apply mr-3;
          }

          .tmdb {
            @apply mr-1 h-4 w-6;
          }

          .douban {
            @apply mr-1 h-4 w-4;
          }

          .tmdbText {
            @apply font-semibold leading-4;
            color: #92dbcc;
          }

          .doubanText {
            @apply font-semibold leading-4;
            color: #00ba03;
          }
        }
      }

      .detailMenuGroup {
        @apply flex px-4 flex-nowrap;

        .btn {
          width: 2.25rem;
          height: 2.25rem;
          background: rgba(255, 255, 255, 0.1);
          &:not(:first-child) {
            @apply ml-5;
          }

          &.share {
            @apply relative;

            .corn {
              @apply absolute;
              width: 0.9375rem;
              height: 0.9375rem;
              right: -0.375rem;
              top: -0.375rem;
            }
          }

          &.download {
            & > img {
              @apply w-4 h-4;
            }
          }
        }
      }
    }

    .title {
      @apply text-xl leading-5 px-4 font-bold text-white mb-0 font-semibold mt-4 leading-8;
      font-family: Alibaba PuHuiTi 2;

      .arrow {
        @apply mx-2 inline-block align-middle;
      }

      .eporderName {
        @apply text-white-60;
      }
    }

    .tag {
      @apply flex px-4 my-2 mr-4 text-white-60 flex-wrap text-sm;

      .item {
        @apply text-xs mr-1 rounded-sm text-white h-5 leading-5 whitespace-nowrap mb-1 bg-white-10;
        padding: 0 0.625rem;
        font-family: Alibaba PuHuiTi 2;
      }
    }
  }
  .linesH5 {
    @apply flex flex-nowrap mt-5 relative pl-4 overflow-x-auto;
    margin-bottom: 1.875rem;
    .noLine {
      @apply text-center w-full h-10 leading-10 font-medium text-base;
      color: #666666;
    }

    .lineBtn {
      @apply rounded flex items-center h-9 justify-center text-sm shrink-0;
      width: calc(calc(100vw - 5rem) / 2);

      &:not(:first-child) {
        margin-left: 0.625rem;
      }

      &.lineOfficial {
        @apply font-semibold relative;
        background: linear-gradient(90deg, #ffbd8d 0%, #ffe5d8 100%);
        color: #7c3c19;

        span {
          @apply font-semibold;
        }

        .vipTip {
          @apply absolute left-0 flex items-center justify-center rounded-sm;
          top: 0rem;
          width: 3.275rem;
          height: 0.6rem;
          background: linear-gradient(270deg, #f34c42 0%, #f68d44 100%);

          span {
            @apply text-xs inline-block font-medium whitespace-nowrap text-white;
            transform: scale(0.5);
          }
        }
      }

      &.lineThird {
        @apply bg-bg25 text-white-80;
        border: 1px solid rgba(255, 255, 255, 0.2);
      }

      &.lineLive {
        @apply text-theme;
      }
    }
  }
}

@keyframes alls {
  0% {
    left: 100vw;
  }

  100% {
    left: 0;
  }
}

// 横屏代码
@media screen and (max-width: 767px) and (orientation: landscape) {
  .playContainer {
    height: calc(100vmin - 94px);
    .playBox {
      &.playBoxPhone {
        @apply relative z-4;
        top: 0px;
        height: calc(100vmin - 94px);
      }
    }
  }
}
